LibreOffice Themes will replace the color customization

Since the first implementation of a dark color theme we continuously improved the customization of LibreOffice. In a GSoC projects this year, Sahil Gautam made it possible to not only change the application colors but also what is defined by the operating system respectively the desktop environment. This resulted in a major UI change for the upcoming version 25.2.

TL;DR: If you are using a dark theme with light application colors you have to load the extension Light Application Colors to restore the same look and feel in version 25.2.

The Past

Colors were configured on three places. At Tools > Options > View: Appearance, where you could follow the system theme or change the appearance to Dark or Light. This affected the UI elements such as dialog background, menus, buttons etc. Secondly, under Application Colors you were able to change the colors of app-specific elements including the document background, the field shading, grid colors, etc. And last but not least we had a menu item Personalization, which allowed, for example, to apply a color gradient to the UI elements but with very limited capabilities and many issues (see bug 125217).

Another problem, mostly relevant on Windows, is an overly strong contrast of UI elements in dark mode (bug 158864). We do pull the colors correctly from the operating system but native tools are designed appropriately with less white-space or use special methods to make the colorization appealing. Microsoft Office, for example, uses colors theme that do not adopt system colors.

And people asked for advanced customization like showing an image in the document background (bug 68145).

The Present

All places of customization are now combined under Tools > Options > Appearance. The colors are supposed to be controlled primarily via the LibreOffice Themes dropdown. You can either create a new theme (and change its colors) or load a theme from the extension site.

Themes can overwrite all or just some colors. For example, the Light Application Colors theme contains only values for the dark appearance turning the document background and respective colors from the automatic dark values into the light pendant.

You can always switch from System to Dark or Light, which now affects both the UI colors and the application colors. And it is still possible to tweak individual colors (for its dark or light appearance).

Customization with Light Application Colors theme

Light Application Colors theme

Customization with Lime theme

Lime theme

As icing on the cake it is possible now to place an image in the application background.

(Dark) system theme with Light Application Color theme, and Application Background customized to Maple Leaves.

(Dark) system theme with Light Application Color theme, and Application Background customized to Maple Leaves.

The Future

There is some room for improvements.

  • In order to make clear how a theme looks like it needs to show a preview. And the initial design suggested an icon view for the installed themes similar to the configuration of area fill options.
  • Removing a scheme from the appearance dialog does not remove the extension because theme extensions add new registry entries, and the appearance dialog interacts with the registry, not the extensions itself.
  • The background image is limited to the Application Background and uses images from Gallery > Background, which is read-only.
  • Changing system colors or using a background image requires to restart the application, which is irritating and not always clear.

Don’t hesitate to comment about your experience and report issues, if you find any.

The Future Perfect

We encourage you to play with the feature. Download one of the themes from the extension site and modify the content (*.oxt extensions are just zip-files, you can rename it to use your extraction tool).

The colors are defined in the file themes.xcu. It basically looks like this:

 <node oor:name="ColorScheme">
  <node oor:name="ColorSchemes">
   <node oor:name="My Color Theme" oor:op="replace">
    <node oor:name="DocColor">
     <prop oor:name="Light">
      <value>255</value>
     </prop>
     <prop oor:name="Dark">
      <value>16711680</value>
     </prop>
    </node>
 ...

The colors are decimal values. Use some tool to convert a hexadecimal RGB value into its decimal representation, for example the LibreOffice Calc function HEX2DEC.

Colors that are not defined in the theme will adopt the default aka automatic values.

And ultimately share your color theme with the community.

Comments
  1. 4 hours ago

Leave a Reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

Discover more from LibreOffice Design Team

Subscribe now to keep reading and get access to the full archive.

Continue reading